<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container-fluid" id="slideshow_page-wrapper">
<div class="row">
<div class="col-sm-12">
<div class="Slideshow_carousel-wrapper container-fluid">
<span class="Slideshow-ctl-L" onclick="carousel_left()"></span>
<div id="slideshow_carousel" class="carousel slide" data-ride="carousel" data-interval="3000">
<div class="carousel-inner Slideshow">
<div class="item active"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
<span class="Slideshow-ctl-R" onclick="carousel_right()"></span>
</div>
<div class="container-fluid Slideshow_progress-bar">
<ul id="slideshow_progress" class="Slideshow_progress"></ul>
</div>
</div>
</div>
</div>
<script>
$('#slideshow_carousel').bind('slide.bs.carousel', function (e) {
carouselHelper();
});
</script>
HTML, BODY {
overflow-x:hidden;
position:relative;
width: 100%;
height: 700px;
background-color:black;
}
#slideshow_page-wrapper {
position: relative;
padding:0;
width:100%;
height: 100%;
background-color:black;
}
.carousel-inner,
.carousel-inner .item {
height:100%;
width:100%;
}
.carousel-fade .carousel-inner > .item {
transition-property: opacity;
}
.carousel-fade .carousel-inner > .item,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
}
.carousel-fade .carousel-inner > .item.active,
.carousel-fade .carousel-inner > .item.next.left {
opacity: 1;
}
.carousel-fade .carousel-inner > .next,
.carousel-fade .carousel-inner > .prev,
.carousel-fade .carousel-inner > .active.left,
.carousel-fade .carousel-inner > .active.right {
left: 0;
}
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right,
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
transform: translate3d(0, 0, 0);
}
.carousel-fade {
opacity:1;
z-index: 200;
}
.Slideshow_carousel-wrapper {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
text-align:center;
width:100%;
}
/* SLIDESHOW CONTROLS LEFT / RIGHT */
.Slideshow-ctl-L {
-webkit-flex: none;
flex: none;
z-index:200;
top:40%;
margin-right:5px;
height:60px;
width:16px;
opacity:0.7;
background-size:15px 60px;
background-repeat:no-repeat;
background-image: url("http://nickel-dime.com/OPENSRC/arrowL.png");
}
.Slideshow-ctl-R {
-webkit-flex: none;
flex: none;
top:40%;
margin-left:5px;
height:60px;
width:15px;
opacity:0.7;
background-size:15px 60px;
background-repeat:no-repeat;
background-image: url("http://nickel-dime.com/OPENSRC/arrowR.png");
}
@media (min-width:500px) {
.Slideshow-ctl-L {
top:40%;
left:0px;
height:80px;
width:20px;
background-size:20px 80px;
}
.Slideshow-ctl-R {
top:40%;
right:0px;
height:80px;
width:20px;
background-size:20px 80px;
}
}
.Slideshow-ctl-L:hover,
.Slideshow-ctl-L:active,
.Slideshow-ctl-L:focus {
opacity:1.0;
}
.Slideshow-ctl-R:hover,
.Slideshow-ctl-R:active,
.Slideshow-ctl-R:focus {
opacity:1.0;
}
/* PROGRESS NAVBAR OUTER BOX */
.Slideshow_progress-bar {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
clear:both;
bottom:0px;
}
@media (max-width:370px) {
.Slideshow_progress-bar {
margin-left:-10px;
}
}
/* INNER FORMATTING BOX */
.Slideshow_progress {
display:table;
float:none;
list-style-type:none;
width:91vw;
max-width:450px;
height:30px;
margin: 30px auto 0 auto;
padding:0;
text-align:middle;
vertical-align:middle;
}
@media (min-width:768px) {
.Slideshow_progress {
width:450px;
}
}
/* RECT THAT CHANGES COLOR FOR EACH SLIDE */
.Slideshow_progress-nugget {
display:table-cell;
float:none;
width:auto;
height:30px;
border-style: solid;
border-left-width:1px;
border-top-width:2px;
border-bottom-width:2px;
border-right-width:1px;
}
.item:nth-child(n) {
background-position:50% 50%;
background-size:cover;
background-repeat:no-repeat;
}
#slideshow_carousel {
-webkit-flex: none;
flex: none;
z-index:50;
top:15px;
height:300px;
width:300px;
overflow:hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
}
#slideshow_progress {
transform:translateX(-5px);
border: #a44601 2.5px solid;
}
#slideshow_progress .Slideshow_progress-nugget {
background-color:#d66e00;
border-color: #a44601;
border-style:solid;
}
#slideshow_progress .Slideshow_progress-nugget:hover,
#slideshow_progress .Slideshow_progress-nugget:active,
#slideshow_progress .Slideshow_progress-nugget:focus {
border-color: yellow;
background-color:yellow;
}
.Slideshow-current {
border-color:#a44601 !important;
background-color:orange !important;
}
.Slideshow-current:hover,
.Slideshow-current:active,
.Slideshow-current:focus {
border-color:yellow !important;
background-color:yellow !important;
}
@media (min-width:500px) {
#slideshow_carousel {
height:425px;
width:425px;
}
}
/* SLIDESHOW IMAGES */
.Slideshow .item:nth-child(1) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_0.jpg");
}
.Slideshow .item:nth-child(2) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_1.jpg");
}
.Slideshow .item:nth-child(3) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_2.jpg");
}
.Slideshow .item:nth-child(4) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_3.jpg");
}
.Slideshow .item:nth-child(5) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_4.jpg");
}
.Slideshow .item:nth-child(6) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_5.jpg");
}
.Slideshow .item:nth-child(7) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_6.jpg");
}
.Slideshow .item:nth-child(8) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_7.jpg");
}
.Slideshow .item:nth-child(9) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_8.jpg");
}
.Slideshow .item:nth-child(10) {
background-image: url("http://nickel-dime.com/OPENSRC/GALLERY/slideshow_9.jpg");
}
$(document).ready( function() {
initProgressBar();
});
// CHANGE THIS WHEN YOU ADD MORE SLIDES
var TotalSlides = 10;
var ProgressBar= 0;
var CurrentSlide = 0;
// 0 == left 1 == right
var Direction = 1;
// BUILD THE PROGRESS BAR BASED ON NUMBER OF SLIDES IN CAROUSEL
function initProgressBar() {
var counter=0;
var head;
var middle;
var tail;
// for each slide in the carousel
$(".Slideshow").children("div").each( function() {
head = "<li class='Slideshow_progress-nugget";
if (counter === 0) {
head += " Slideshow-current";
}
middle = "' onclick='progressClick(";
tail = ")'><span></span></li>";
$("#slideshow_progress").append( head + middle + counter + tail);
counter++;
});
}
//
// RIGHT AND LEFT CAROUSEL CTLS
//
function carousel_left() {
Direction = 0;
if (CurrentSlide > 0) {
$("#slideshow_carousel").carousel( "prev" );
}
}
function carousel_right() {
Direction = 1;
if ((CurrentSlide + 1) < TotalSlides) {
$("#slideshow_carousel").carousel( "next" );
} else {
progressClick(0);
}
}
//
// CLICK ON PROGRESS BAR
//
function progressClick( index ) {
ProgressBar = index;
progressBarTo( ProgressBar );
// scroll the carousel
$("#slideshow_carousel").carousel( index );
}
//
// CALLBACK ON CAROUSEL SLIDE
//
function carouselHelper() {
// coming here on regular scroll
if (ProgressBar == CurrentSlide) {
// next
if ((Direction == 1) && (++CurrentSlide >= TotalSlides)) {
// wraparound
CurrentSlide = 0;
// prev
} else if (Direction === 0) {
if (--CurrentSlide < 0) {
CurrentSlide = 0;
}
}
progressBarTo( CurrentSlide );
} else {
// coming here because of progress bar click
CurrentSlide = ProgressBar;
}
}
//
// FORWARD/BACKWARD SCROLL PROGRESS BAR
//
function progressBarTo(index) {
var nugget = $("#slideshow_progress .Slideshow_progress-nugget");
$.each(nugget, function (i, nug) {
if (i <= index) {
ProgressBar = i;
$(nug).addClass("Slideshow-current");
} else {
$(nug).removeClass("Slideshow-current");
}
});
}
